<template>
	<view>
		<navbar :leftText="false" title="我的" />
		<view class="mine-card">
			<view class="relative mine-head flex justify-content_space-between align-item_center" @click="login">
				<view class="user flex align-item_center">
					<image v-if="user.info.avatar" class="user-avatar block" :src="user.info.avatar" />
					<image v-else class="user-avatar block"
						src="https://mall-admin.xinjiafu.net/mini-static/images/common/0.png" />
					<view class="user-info">
						<view>{{user.info.nickname}}</view>
						<!-- <view>年龄：70</view> -->
					</view>
				</view>
				<image class="setting block" src="https://mall-admin.xinjiafu.net/mini-static/images/common/1.png"
					@click="settins" />
			</view>

			<view class="mine-vip relative">
				<image class="mine-vip-bg block absolute"
					src="https://mall-admin.xinjiafu.net/mini-static/images/common/2.png" />
				<view class="main relative zi2">
					<view class="main-head flex justify-content_space-between align-item_center">
						<view class="main-head-info">
							<view>欣家服</view>
							<view>积分会员卡</view>
						</view>
						<image class="main-head-logo block" src="https://mall-admin.xinjiafu.net/mini-static/images/common/4.png" />
					</view>
					<view class="main-foot flex align-item_center justify-content_space-between">
						<view>NO.xxxxxx</view>
						<view @click="vip">查看详情</view>
					</view>
				</view>
			</view>

			<view class="mine-show flex align-item_center justify-content_center">
				<view class="mine-show-item" @click="points">
					<view>积分</view>
					<view>{{user.info.point}}</view>
				</view>
				<view class="mine-show-line"></view>
				<view class="mine-show-item" @click="coupon">
					<view>优惠券</view>
					<view>-</view>
				</view>
			</view>
		</view>

		<view class="mine-problem flex align-item_center justify-content_space-between relative">
			<button class="absolute v-client" open-type="contact"></button>
			<view class="main flex align-item_center">
				<image class="main-icon block" src="https://mall-admin.xinjiafu.net/mini-static/images/common/3.png" />
				<view>疑难解答</view>
			</view>
			<image class="mine-problem-right block" src="https://mall-admin.xinjiafu.net/mini-static/images/common/5.png" />
		</view>

		<tabbar :current="2" />
	</view>
</template>

<script setup>
	import tabbar from "@/components/tabbar.vue"
	import navbar from "@/components/navbar.vue"
	import {
		navigateTo,
		msg
	} from "@/utils/tool.js"
	import {
		reactive
	} from "vue"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import userApi from "@/api/member/user.js"

	// 会员
	const vip = () => msg()
	// 积分
	const coupon = () => msg()

	const user = reactive({
		info: {
			point: 0,
			avatar: "",
			nickname: "",
		}
	})

	const points = () => {
		navigateTo("/points/points/index")
	}

	const settins = () => {
		navigateTo("/user/setting/index")
	}

	const userGet = () => {
		userApi.get().then(res => {
			if (res.code === 0) {
				user.info = res.data;
			}
		})
	}

	onShow(() => {
		userGet()
	})

	onLoad(() => {

	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.getPhoneNumber {
		position: absolute;
		left: 0;
		top: 0
	}

	.mine-problem {
		width: 710rpx;
		height: 116rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: #EFE5D0;
		padding: 0 30rpx 0 40rpx;
		box-sizing: border-box;
		margin: 40rpx auto;

		&-right {
			width: 12rpx;
			height: 24rpx;
		}

		.main {

			view {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: rgba(64, 3, 3, 1);
			}

			&-icon {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}

	.mine-show {
		text-align: center;
		margin-top: 24rpx;
		padding-bottom: 26rpx;

		&-line {
			width: 0;
			height: 120rpx;
			border: 1rpx solid #999999;
		}

		&-item {
			width: 50%;

			view:last-child {
				font-size: 60rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 86.88rpx;
				color: rgba(64, 3, 3, 1);
			}

			view:first-child {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
			}
		}
	}

	.mine-vip {
		border-radius: 8rpx;
		width: 680rpx;
		height: 332rpx;

		.main {
			&-foot {
				padding: 98rpx 46rpx 0 58rpx;

				view:last-child {
					width: 152rpx;
					height: 48rpx;
					line-height: 48rpx;
					opacity: 1;
					border-radius: 120rpx;
					background: #F5F5F5;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(167, 37, 48, 1);
				}

				view:first-child {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(255, 255, 255, 1);
				}
			}

			&-head {
				padding: 38rpx 46rpx 0 52rpx;

				&-logo {
					width: 72rpx;
					height: 72rpx;
				}

				&-info {
					view:last-child {
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(255, 255, 255, 1);
						margin-left: 4rpx;
					}

					view:first-child {
						font-size: 48rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
						line-height: 68.98rpx;
					}
				}

			}
		}

		&-bg {
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
		}
	}

	.mine-head {
		padding-bottom: 30rpx;

		.setting {
			width: 60rpx;
			height: 60rpx;
		}

		.user {
			&-info {
				margin-left: 24rpx;

				view:last-child {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(64, 3, 3, 1);
					margin-top: 2rpx;
				}

				view:first-child {
					font-size: 40rpx;
					font-weight: 400;
					color: rgba(64, 3, 3, 1);
				}
			}

			&-avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}

	.mine-card {
		padding: 40rpx 35rpx 0rpx;
		background-color: #EFE5D0;
	}
</style>